<template>
  <div>
    <headers @headCallBack="headCall" @cllosesearch="cllosesearch"></headers>
    <div class="mall min-width ggbgc" v-loading="loading">
      <swiper :options="swiperOption" v-if="carousellist.length>0">
        <swiper-slide class="swiper-container" v-for="item in carousellist" :key="item.id">
          <img class="swiper-slide-img" @click="types(item.type,item.link)" :src="item.img_src" alt="">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <div class="width Commoditycontent clear">
        <div class="content-left fl">
          <div @click="classifyid(item.id)"
               class="left-list"
               :class="{act:classifyID==item.id}"
               v-for="item in classify" :key="item.id">
            <div class="left-list-content" :title="lang=='en'?item.name_en:item.name">
              <div class="left-list-img">
                <img :src="item.img_src" alt="">
              </div>
              <p class="left-list-title">{{lang=='cn'?item.name:item.name_en}}</p>
            </div>
          </div>
        </div>
        <div class="content-right clear fr">
          <div @click="currentindex('/?productid='+item.id)"
                       class="right-list fl" v-for="(item,index) in productlist" :key="item.id">
            <div class="right-list-img" :style="{backgroundImage:'url('+ item.img_src +')'}">
            </div>
            <p class="right-list-title">{{lang=='cn'?item.title:item.title_en}}</p>
            <p class="right-list-en">{{lang=='cn'?item.desc:item.desc_en}}</p>
            <p class="right-list-Number">{{lang=='cn'?item.price:item.price_en}}{{$t('message.fuhao')}}</p>
            <span v-if="index<2">New</span>
            <div v-show="Loads" class="Load">
              <img src="../../../assets/pc/jzz.png" alt="">
              <p>努力加载中...</p>
            </div>
          </div>
          <div v-show="nogoods" class="content-right-img">
            <img src="../../../assets/pc/gym.png" alt="">
            <p class="content-right-title">{{$t('message.Norelatedproducts')}}</p>
          </div>
        </div>
      </div>
      <div v-if="elpagination" class="width paging">
        <el-pagination
          background
          layout=" prev, pager, next"
          @current-change="handleCurrentChange"
          :page-size="pagesize"
          :total="totalCount"
          :current-page="currentPage">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import headers from "@/components/pc/public/header"

  export default {
    name: 'mall',
    components: {
      swiper,
      swiperSlide,
      headers,
    },
    inject: ['reload'],
    data() {
      return {
        //轮播组件控制
        swiperOption: {
          loop: true,
          autoplay: {
            delay: 5000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
        },
        nogoods: false,  //没有相关产品
        Loads: true,   //加载
        lang: 'en',    //语言
        equipment: 'pc',  //参数pc
        classifyID: 0,  //分类id
        currentPage: 1, //初始页
        pagesize: 9,  //  每页的条数
        totalCount: 0,//总条数
        carousellist: [],
        classify: [],
        productlist: [],
        loading: true,
        search: '', //搜索初始值
        elpagination: true //显示或隐藏上一页下一页
      }
    },
    //钩子函数
    created() {
      if (sessionStorage.sitename) {
        this.lang = sessionStorage.sitename;
      }
      this.init();    //轮播图
      this.productclassify();  //产品分类
    },
    methods: {
      // 请求数据轮播图
      init() {
        axios.get('banner/api/get_banner', {
          params: {
            language: this.lang
          }
        }).then((response) => {
          this.carousellist = response.data.list;
        })
          .catch(function (error) {
            console.log(error);
          });
      },
      // 请求产品分类
      productclassify() {
        axios.get('product/Api/get_product_category', {
          params: {
            language: this.lang,
            category_id: this.classifyID
          }
        }).then((response) => {
          this.classify = response.data.list;
          this.classifyID = response.data.list[0].id;
          this.gets();
        })
          .catch(function (error) {
            console.log(error);
          });
      },
      // 搜索全部商品
      product() {
        if (this.search) {
          this.classifyID = null;
          this.gets()
        } else {
          this.gets()
        }
      },
      //产品接口
      gets() {
        this.loading = true;
        var _this = this;
        axios.get('product/api/get_product_list', {
          params: {
            language: this.lang,
            limit: this.pagesize,
            category_id: this.classifyID,
            page: this.currentPage,
            search: this.search
          }
        }).then((response) => {
          this.productlist = response.data.list.data;
          this.totalCount = response.data.list.total;
          // 显示或隐藏上一页下一页
          if (response.data.list.total < 9) {
            this.elpagination = false;
          } else {
            this.elpagination = true;
          }
          // 判断当前页产品有与没有
          if (response.data.list.total == 0) {
            this.nogoods = true;
          } else {
            this.nogoods = false;
          }
          this.Loads = false;
        }).catch(function (error) {
          console.log(error);
        }).finally(function () {
          _this.loading = false;
        });
      },
      //子组件向父组件传值，父组件接收
      headCall(inputval) {
        if (inputval == '') {
          return
        } else {
          this.search = inputval;
          this.product()
        }
      },
      //点击获取每个分类的数据
      classifyid(id) {
        this.classifyID = id;
        this.search = '';
        this.currentPage =1;
        this.gets();
      },
      //点击每一页
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage;
        this.gets();
      },
      cllosesearch() {
        this.reload()
      },
      //轮播图跳转
      types(type, link) {
        if (type === 'link') {
          window.open(link);
        } else if (type === 'product') {
          this.$router.push({path: '/', query: {productid: link}});
          sessionStorage.url=JSON.stringify('/?productid='+link);
        }
      },
      currentindex(url){
        sessionStorage.url = JSON.stringify(url);
        this.$router.push(url)
      }
    }
  }
</script>
<style scoped>
  .mall {
    padding-bottom: 30px;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .headeract {
    color: red !important;
  }

  .Commoditycontent {
    margin-top: 40px;
  }

  .Commoditycontent .content-left {
    width: 200px;
    height: 1260px;
    background: #fff;
    padding-bottom: 111px;
  }

  .Commoditycontent .content-left .left-list {
    height: 120px;
    width: 100%;
    cursor: pointer;
    color: #030303;
  }

  .Commoditycontent .content-left .left-list .left-list-content {
    height: 120px;
    padding-right: 50px;
    padding-left: 38px;
    display: table;
  }

  .Commoditycontent .content-left .left-list .left-list-content .left-list-img {
    width: 41px;
    min-width: 41px;
    height: 62px;
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
  }

  .Commoditycontent .content-left .left-list .left-list-content .left-list-img img {
    margin: 0 auto;
  }

  .Commoditycontent .content-left .left-list .left-list-content .left-list-title {
    line-height: 120px;
    font-size: 16px;
    margin-left: 22px;
    width: 87px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .act {
    background: #fef8f8;
    color: #ee9194 !important;
  }

  .Commoditycontent .content-right {
    width: 960px;
    position: relative;
  }

  .Commoditycontent .content-right .content-right-img {
    position: absolute;
    left: 40%;
    top: 250px;
    display: block;
    width: 280px;
    height: 220px;
    text-align: center;
  }

  .Commoditycontent .content-right .content-right-img img {
    width: 250px;
    height: 220px;
  }

  .Commoditycontent .content-right .content-right-title {
    font-size: 28px;
    color: #999;
    margin-top: 15px;
  }

  .Commoditycontent .content-right .right-list {
    width: 300px;
    height: 400px;
    margin-right: 30px;
    margin-bottom: 30px;
    background: #fff;
    text-align: center;
    cursor: pointer;
    position: relative;
  }

  .Commoditycontent .content-right .right-list .Load {
    position: absolute;
    margin: 0;
    top: 20%;
    left: 50%;
    transform: translate(-50%);
    width: 236px;
    height: 136px;
    text-align: center;
  }

  .Commoditycontent .content-right .right-list .Load p {
    font-size: 28px;
    color: #999;
  }

  .Commoditycontent .content-right .right-list:nth-child(3n+3) {
    margin-right: 0;
  }

  .Commoditycontent .content-right .right-list .right-list-img {
    height: 260px;
    width: 260px;
    margin: 20px;
    background-size: cover;
    background: no-repeat center center;
  }

  .Commoditycontent .content-right .right-list .right-list-title {
    font-size: 16px;
    color: #333;
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .Commoditycontent .content-right .right-list .right-list-en {
    font-size: 14px;
    color: #999;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .Commoditycontent .content-right .right-list .right-list-Number {
    font-size: 16px;
    color: #e96f72;
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .Commoditycontent .content-right .right-list span {
    position: absolute;
    left: 0;
    top: 0;
    width: 38px;
    height: 16px;
    line-height: 15px;
    font-size: 12px;
    color: #e96f72;
    border: 1px solid #e96f72;
    z-index: 999;
  }

  .paging {
    padding-left: 420px;
    padding-bottom: 30px;
  }

  .swiper-container {
    width: 100%;
    max-height: 700px;
    overflow: hidden;
  }

  .swiper-slide-img {
    width: 100%;
    height: auto;
    cursor: pointer;
  }
</style>
